<%@ page import="com.example.dao.impl.UserDaoimpl" %>
<%@ page import="com.example.entity.User" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
	<style>
		* {
			font-family: 'Poppins', sans-serif;
		}

		.persontop {
			height: 15vh;
			background-color: aliceblue;
			background-image: url('../img/7E50A8CD331E8E3D67BD348DA9762B07.jpg');
			background-position: 0% 40%;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.image {
			display: flex;
			width: 200px;
			height: 200px;
			align-items: center;
			justify-content: center;
			margin-left: 50px;
			transform: translateY(-50px);

		}

		.image button {
			display: none;
			position: absolute;

		}

		.image img {
			border: 2px solid #000;
			border-radius: 100px;
			width: 100%;
			height: 100%;
			object-fit: cover;

		}

		.image:hover button {
			display: block;
			position: absolute;
		}

		.userinfo {
			/* display: flex; */
			transform: translateX(50px);
		}

		.personuser {
			display: flex;
		}

		.personuser p {
			font-size: 40px;
		}

		span {}

		span+span {
			margin-left: 20px;
		}

		hr {
			margin: 0px 20px;
			border: 1.4px solid rgba(0, 0, 0, 0.1);
		}

		button {
			width: 80px;
			height: 80px;
		}

		button i {
			font-size: 50px;
		}

		.editor button {
			position: absolute;
			right: 10%;
			margin-top: 50px;
			width: 200px;
			height: 80px;
			background-color: transparent;
			color: #000;
			border: 1px solid #000;
			border-radius: 10px;
			line-height: 80px;
		}

		.editor button a {
			display: block;
			width: 100%;
			height: 100%;
		}

		.content {
			display: flex;
			width: 100%;
		}

		.content .left{
			width: 20%;
			height: 80vh;
		}

		.content .right{
			width: 80%;
			height: 80vh;
		}
		ul{
			list-style: none;
			margin: 0px;
			padding: 0px;
		}
		li{
			margin-top: 50px;
			font-size: 35px;
			padding: 4px;
			margin-right: 20px;
			margin-left: 20px;
		}
		li+li{
			margin-top: 40px;

		}
		li:hover{
			background-color: rgba(0, 0, 0, 0.03);
			cursor: pointer;
		}
		.TOTAL{
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.5);
		}
		.pictures{
			width: 200px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: none; /* 使用 Flexbox 布局 */
			flex-direction: column; /* 子项目垂直排列 */
		}
		iframe{
			width: 100%;
			height: 100%;
		}
		.li.active{
			background-color: rgba(0, 0, 0, 0.1);
		}
	</style>
</head>
<%
	UserDaoimpl userDaoimpl = new UserDaoimpl();
	User user = (User) request.getSession().getAttribute("user");
	if (user != null){
		ArrayList<Integer> collect = userDaoimpl.findCollectByUserID(String.valueOf(user.getUserId()));
		request.getSession().setAttribute("collect", collect);
	}
%>
<body>
<div class="persontop">

</div>
<div class="personuser">
	<div class="image">
		<img src="${user.userimg == null ? './img/7e72c58637ff26df68fb30939de078d2bbbfcdbe.jpg' : user.userimg}" alt="" >
		<button type="submit" id="picture"><i class='bx bx-upload'></i></button>
	</div>
	<div class="userinfo">
		<p>${user.username == null ? '未登录':user.username}</p>
		<span>获赞 ${user.huozan == null ? '0':user.huozan}</span>
		<span>硬币 ${user.coin == null ? '0':user.coin}</span>
		<span>等级 ${user.level == null ? '0':user.level}</span>
		<span>签名:${user.signature == null ? '暂无':user.signature}</span>
	</div>
	<div class="editor">
		<button><a href="./editorialmaterial.jsp" style="text-decoration: none;color: #000;">编辑资料</a></button>
	</div>
</div>
<hr>
<div class="content">
	<div class="left">
		<ul>
			<li class="li active" onclick="html('guanzhu',1)">关注 ${user.guanzhu == null ? '0':user.guanzhu}</li>
			<li class="li" onclick="html('fans',2)">粉丝 ${user.fans == null ? '0':user.fans}</li>
		</ul>
		<hr style="margin-top: 40px;">
		<ul>
			<li class="li" onclick="html('collect',3)">收藏</li>
		</ul>
	</div>
	<hr style="margin: 20px 0px;">
	<div class="right">
		<iframe src="./guanzhu.jsp" frameborder="0" id="iframe"></iframe>
	</div>
	<div class="TOTAL">
		<div class="pictures">
			<img src="" alt="" id="zhanshi" width="200px" height="200px" style="object-fit: cover">
			<input type="file" id="imageLoader" style="width: 100%;margin-bottom: 5px;margin-top: 5px">
			<input type="submit" onclick="getHtml()" style="width: 100%" value="保存">
		</div>
	</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	//iframe窗口
	function html(type,index) {
		var iframe = document.getElementById('iframe');
		iframe.src = './' + type + '.jsp';

		var li = document.querySelectorAll('.li');
		for (var i = 0; i < li.length; i++) {
			li[i].classList.remove('active');
		}
		li[index-1].classList.add('active');
	}

	var TOTLA = document.querySelector('.TOTAL')
	var pictures = document.querySelectorAll('.pictures')
	var picture = document.getElementById('picture')
	picture.addEventListener('click', function () {
		TOTLA.style.display = 'block'
		pictures.forEach(function (picture) {
			picture.style.display = 'none';
		})
		pictures[0].style.display = 'flex';
	})

	window.onclick = function (event) {
		if (event.target === TOTLA) {
			TOTLA.style.display = 'none'
		}
	}
	var imageLoader = document.getElementById('imageLoader');
	var base64String = null;
	imageLoader.addEventListener('change', function () {
		var file = imageLoader.files[0];
		var reader = new FileReader();
		reader.onload = function () {
			// 将Base64编码的字符串设置为图片的src属性
			base64String = reader.result;
			var pic = document.getElementById('zhanshi')
			pic.src = base64String;
			console.log('tupian ' + base64String)
		}
		reader.readAsDataURL(file); // 读取文件内容并转换为Base64
	});


	function getHtml() {
		// var Newusername = document.getElementsByName('username')[0].value;
		// console.log('username ' + Newusername)
		// var Newgender = document.getElementsByName('gender')[0].value;
		// console.log('gender ' + Newgender)
		// var Newsignature = document.getElementsByName('signature')[0].value
		// console.log('signature ' + Newsignature)
		var Newuserimage = base64String ? base64String : '${user.userimg}';
		console.log('userimg ' + Newuserimage)

		alert('保存成功')

		// 发送AJAX请求到服务器
		$.ajax({
			type: "POST",
			url: "alterimage.jsp", // 服务器端处理页面
			data: {
				userimg: Newuserimage,
				userid:${user.userId},
				flag: "onlyImage",
			},
		});
	}



</script>
</html>